<template>
	<view class="container">
		<view class="content">
			<view class="title">
				<view class="left">
					<view class="name">
						累计收益
					</view>
					<view class="number">
						{{reward}}
					</view>
				</view>
				<view class="right">
					<view class="name">
						当前可提
					</view>
					<view class="number">
						{{nums}}
					</view>
				</view>
			</view>
			<view class="amount">
				<view class="amount_title">
					<view class="txjq">
						提现金额
					</view>
					<view class="txjl" style="color: #FA2C1E;" @click="toCashWithdrawalDetail">
						提现记录
					</view>
				</view>
				<view class="amount_input">
					<text class="prefix">￥</text><input type="number" v-model="num" value="" placeholder="0.00"
						class="input" />
				</view>
				<view class="amount_tips">
					20元起提，请输入10的倍数，手续费6.0%
				</view>
			</view>
		</view>
		<view class="phone">
			<view class="current_phone">
				<view class="">
					当前手机号
				</view>
				<view class="">
					{{mobile}}
				</view>
			</view>
			<view class="captcha">
				<input type="number" value="" v-model="yzm" placeholder="请输入验证码" />
				<!-- <view class="btn" @click="sendBtn">
					获取验证码
				</view> -->
				<button class="btn" @click="sendBtn" :disabled="sendCodeTime > 0">{{sendCodeText}}</button>
			</view>
		</view>
		<view class="tips">
			<view class="title">
				提现说明：
			</view>
			<view class="tips_content">
				1、请于工作日每天9:00至21:00时间内提现</br>
				2、单日最多提现1次，提现手续费6.0%</br>
				3、提现金额为10的倍数</br>
				4、提现需人工审核，遇节假日顺延
			</view>
		</view>
		<view class="bottom">
			<button type="default" @click="Withdrawal" class="btn">提现</button>
		</view>
	</view>
</template>

<script>
	import {
		withdraw,
		getWithdrawData,
		getWithdrawSend
	} from '@/api/api.js'
	export default {
		data() {
			return {
				sendCodeTime:0,
				num: '',
				nums: '',
				reward: 0,
				mobile: '',
				yzm: '',
				account_id:''
			};
		},
		onShow() {
			this.account_id = uni.getStorageSync('userinfo').id
			this.mobile = uni.getStorageSync('userinfo').mobile
			this.account_id = uni.getStorageSync('userinfo').user_id
			this.getShopList()
		},
		computed:{
			sendCodeText(){
				if(this.sendCodeTime > 0){
					return '发送验证码('+this.sendCodeTime+'s)'
				}else {
					return '发送验证码'
				}
			},
		},
		methods: {
			getShopList() {
				getWithdrawData().then(res => {
					this.reward = res.data.data.reward
					this.nums = res.data.data.money
					this.num = res.data.data.money

				})

			},
			sendBtn() {
				this.sendCodeTime = 60
				let id = setInterval(()=>{
					if(this.sendCodeTime <= 0){
						clearInterval(id)
					}else [
						this.sendCodeTime = this.sendCodeTime - 1
					]
				},1000)
				getWithdrawSend({
					mobile: this.mobile,
					
				}).then(res => {

				})
			},
			Withdrawal() {
				if(this.yzm && this.yzm != ''){
					if(this.num % 10 != 0 || this.num < 20){
						uni.showModal({content:'20元起提，请输入10的倍数',showCancel: false})
						return
					}
					withdraw({
						money: this.num,
						captcha:this.yzm,
						mobile:this.mobile,
						account_id:this.account_id,
					}).then(res => {
						uni.showToast({
							icon:'none',
							title: '提现成功'
						});
						this.num = 0
					})
				}else {
					uni.showModal({content:'请输入验证码',showCancel: false})
				}
			},
			toCashWithdrawalDetail() {
				uni.navigateTo({
					url: '/pages/my/cashWithdrawalDetail/cashWithdrawalDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.content {
		background-color: #fff;
		width: 100%;
		padding: 22rpx 30rpx;
	
	.title {
			background-image: url(../../../static/bg_tx.png);
			background-size: 100% 100%;
			width: 100%;
			height: calc(100vw * 0.3188 - 9.56rpx);
			display: flex;
			align-items: center;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;

			}

			.right {
				flex: 2;
				display: flex;
				align-items: center;
				flex-direction: column;
			}

			.name {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36px;
			}

			.number {
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 66rpx;
			}
		}

		.amount {
			margin-top: 48rpx;

			.amount_title {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			.amount_input {
				margin-top: 30rpx;
				font-size: 60rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 84rpx;
				border-bottom: 1px solid #E7E7E7;
				position: relative;

				.prefix {
					position: absolute;
					left: 0;
					top: 0;
				 width: 80rpx;
					text-align: center;
				}

				.input {
					padding-left: 80rpx;
					font-size: 60rpx;
					line-height: 84rpx;
					height: 84rpx;
				}
			}

			.amount_tips {
				margin-top: 22rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			 line-height: 34rpx;
			}
		}
	}

	.phone {
		padding: 32rpx 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;

		.current_phone {
			display: flex;
			justify-content: space-between;
			padding-bottom: 34rpx;
			border-bottom: 1px solid #E7E7E7;
			color: #333333;
		}

		.captcha {
			display: flex;
			justify-content: space-between;
			padding-top: 32rpx;

			.btn {
				color: #FA2C1E;
				background-color: transparent;
				padding: 0;
				margin: 0;
				line-height: 1;
			}
			.btn[disabled]:not([type]), .btn[disabled][type=default]{
				color: #FA2C1E;
			    opacity: 0.5
			}
			
			.btn[disabled]:not([type]), .btn[disabled][type=default] {
			    color: rgba(0,0,0,.5);
			    background-color: transparent;
			}
			.btn::after {
				content: none;
			}
		}
	}

	.tips {
		margin-top: 20rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		line-height: 36rpx;
	
	.title {
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;

		}

		.tips_content {
			margin-top: 18rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 24rpx 30rpx;
		background-color: #fff;

		.btn {
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
			border-radius: 8rpx;
		}
	}
</style>
